<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图表</title>
	<link rel="stylesheet" type="text/css" href="http://bobo.bj.bcebos.com/neat.css">
	<style type="text/css">
		.color{
			float: right;
			width: 400px;
			height: 400px;
			border-radius: 200px;
			background-image: radial-gradient(rgb(129, 227, 238), rgb(25, 183, 207)); /* 标准的语法 */
		}
		#main,#main2{
            float: left;
			height: 50%;
            width: 50%;
		}
        #main3{
            float: right;
            width: 60%;
            background-color: #ccc;
        }
        #main4{
            float: right;
            width: 40%;
            background-color: #ccc;
        }
        .inputBox{
            position: absolute;
            right: 10px;
            top: 10px;
            z-index: 12;
        }
	</style>
	<script src="http://bobo.bj.bcebos.com/echarts.min.js"></script>
    <script src="http://bobo.bj.bcebos.com/jquery.min.js"></script>
</head>
<body>
    <div class="inputBox">
        第<input id="num" type="text" name="">周
        <button type="button" class="fycx btn btn-warning">搜索</button>
    </div>
    
	<!-- <div class="color"></div> -->
	<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="height:400px;"></div>
    <div id="main2" style="height:400px;"></div>
    <div id="main3" style="height:400px;"></div>
    <div id="main4" style="height:400px;"></div>
	<script>
	//接口地址
	var GETWEEK = "daysever.php?act=selectByWeek";//获取一周等级
    var MTDATA = [];
    var XWARRY = ['不再犯规','编程词汇', '个人项目','学习进步','认真工作','锻炼身体','丑陋的字'];

    function timeweek(number) {
       var d = new Date(2017,0,2,01,0,0);
       var hms = d.getTime();
       var starday = 1000*60*60*24*7*number+hms;
       d.setTime(starday);
       var m = d.getMonth()+1>9?d.getMonth()+1:"0"+(d.getMonth()+1);
       var day = d.getDate()>9?d.getDate():"0"+d.getDate();
       var star = d.getFullYear()+"-"+m+"-"+day;
       var endday = 1000*60*60*24*6;
       d.setTime(starday+endday);
       var endm = d.getMonth()+1>9?d.getMonth()+1:"0"+(d.getMonth()+1);
       var endday = d.getDate()>9?d.getDate():"0"+d.getDate();
       var end = d.getFullYear()+"-"+endm+"-"+endday;
       return {"star":star,"end":end}
    }

    

    function aj(obj){
        $.ajax({
            url: obj.url,
            type: 'POST',
            data: obj.data||{mydata: ""},
            dataType: 'html'
        })
        .done(function(data) {
            obj.fn(data);
        })
        .fail(function() {
            console.log("error");
        })
    }

    $('.fycx').click(function(event) {
        aj({
            url: 'daysever.php?act=selectByfy',
            data: {mydata: JSON.stringify({"star":($("#num").val()-1)*7,"len":7})},
            fn:function(data){
                var arry = JSON.parse(data);
                MTDATA = dataDispose(arry);
                check(MTDATA);
                option2.series[0].data = MTDATA;
                myChart2.setOption(option2);
            }
        });
        aj({
        url: 'behaviorsever.php?act=selectByWeek',
        data: {mydata: JSON.stringify(timeweek($("#num").val()-1))},
        fn:function(data){
            var arry = JSON.parse(data);
            console.info(arry);
            option.series = datachuli(arry);
            myChart.setOption(option);
        }
    });
    });

    aj({
        url: 'behaviorsever.php?act=selectThisWeek',
        data: {mydata: JSON.stringify({"star":"2017-01-02","end":"2017-01-08"})},
        fn:function(data){
            var arry = JSON.parse(data);
            console.info(arry);
            option.series = datachuli(arry);
            myChart.setOption(option);
        }
    });


    function check(arry) {
        var len = 7-arry.length;
        for (var i = 0; i < len; i++) {
            arry.push({
                "value":1,
                "itemStyle":{
                    "normal":{
                        "color":new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{offset: 0,color: "#c8c9ca"}, {offset: 1,color: "#535454"}])
                    }
                }
            });
        }
    }
	//数据处理方法
	function dataDispose(arry){
        var objarry = arry.map(function (item, i) {
            var num = 0;
            var strcolor = "";
            var endcolor = "";
            if(item.rank == "优"){
                num = parseInt(item.grade);
                strcolor = "#8cef7a";
                endcolor = "#3ce804";
            }else if(item.rank == "良"){
                num = parseInt(item.grade);
                strcolor = "#81e3ee";
                endcolor = "#19b7cf";
            }else if(item.rank == "中"){
                num = parseInt(item.grade);
                strcolor = "#e6cc6d";
                endcolor = "#ffb100";
            }else{
                num = parseInt(item.grade);
                strcolor = "#fb767b";
                endcolor = "#cc2e48";
            }
            return {
                "value":num,
                "itemStyle":{
                    "normal":{
                        "color":new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{offset: 0,color: strcolor}, {offset: 1,color: endcolor}])
                    }
                }
            }
        });
        return objarry;
    }
    
    function datachuli(arry) {
        var num = 0;
        var serieArry = [];
        var xwobj = {};
        for (var xi = 0; xi < XWARRY.length; xi++) {
            xwobj[XWARRY[xi]] = [0,0,0,0,0,0,0];
            
        }
        //console.log("xwobj",xwobj);
        //根据行为数组查找
        for (var ai = 0; ai < arry.length; ai++) {
            console.log("arry",arry[ai].behavior);
            xwobj[arry[ai].behavior][num] = parseInt(arry[ai].grade);
            //console.log("-------------",num);
            if(arry[ai+1] && arry[ai].time !== arry[ai+1].time){//检查时间改变
                num++;
            }
        }
        //console.log("xwobj",xwobj);
        var serieArry = [];
        for (var xi = 0; xi < XWARRY.length; xi++) {
            var temp = {
                name: XWARRY[xi],
                type: 'bar',
                stack: '行为',
                label: {
                    normal: {
                        show: true,
                        position: 'insideRight'
                    }
                },
                data: xwobj[XWARRY[xi]]
            };
            serieArry.push(temp);
        }
        //console.log(serieArry);
        return serieArry;
    }








	var myChart = echarts.init(document.getElementById('main'));
    var myChart2 = echarts.init(document.getElementById('main2'));
	var myChart3 = echarts.init(document.getElementById('main3'));
	var myChart4 = echarts.init(document.getElementById('main4'));
	
option = {
	backgroundColor: '#eee',
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    legend: {
        data: XWARRY
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis:  {
        type: 'value'
    },
    yAxis: {
        type: 'category',
        data: ['周一','周二','周三','周四','周五','周六','周日']
    },
    series: []
};



 
 $.ajax({
        url: GETWEEK,
        data: {mydata: ""},
        type: 'POST',
        dataType: 'html'
    })
    .done(function(data) {
        var arry = JSON.parse(data);
        MTDATA = dataDispose(arry);
        check(MTDATA);
        var axisData = ['周一','周二','周三','周四','周五','周六','周日'];
        var links = MTDATA.map(function (item, i) {
            return {
                source: i,
                target: i + 1
            };
        });
        links.pop();
        //console.log(MTDATA);
        option2 = {
            backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{
                offset: 0,
                color: '#f7f8fa'
            }, {
                offset: 1,
                color: '#cdd0d5'
            }]),
            title: {
                text: '本周预览'
            },
            tooltip: {},
            xAxis: {
                type : 'category',
                boundaryGap : false,
                data : axisData
            },
            yAxis: {
                type : 'value'
            },
            series: [
                {
                    type: 'graph',
                    layout: 'none',
                    coordinateSystem: 'cartesian2d',
                    symbolSize: 40,
                    label: {
                        normal: {
                            show: true
                        }
                    },
                    edgeSymbol: ['circle', 'arrow'],
                    edgeSymbolSize: [4, 10],
                    data: MTDATA,
                    links: links,
                    lineStyle: {
                        normal: {
                            color: '#2f4554'
                        }
                    }
                }
            ]
        };
        myChart2.setOption(option2);
    })
    .fail(function() {
        console.log("error");
    })
    .always(function() {
        console.log("--------------");
    });


$.ajax({
        url: 'daysever.php?act=select',
        type: 'POST',
        dataType: 'html'
    })
    .done(function(data) {
        var arry = JSON.parse(data);
        console.log(arry);
        var zf = [];
        var yz = [];
        var jb = [];
        var you = 0;
        var liang = 0;
        var zhong = 0;
        var cha = 0;
        var xData = function() {
            var data = [];
            for (var i = 1; i < arry.length+1; i++) {
                data.push("第" + i + "天");
                zf.push(arry[i-1].grade);
                if(arry[i-1].grade-30>-1){
                    yz.push(30);
                    jb.push(arry[i-1].grade-30);
                }else{
                    yz.push(0);
                    jb.push(arry[i-1].grade);
                }

                if(arry[i-1].grade-85>-1){
                	you++;
                }else if(arry[i-1].grade-70>-1){
                	liang++;
                }else if(arry[i-1].grade-50>-1){
                	zhong++;
                }else{
                	cha++;
                }
                
            }
            return data;
        }();
        option4 = {
			backgroundColor: '#eee',
			color:["#fb767b","#e6cc6d","#81e3ee","#8cef7a"],
		    title : {
		        text: '日常状态统计',
		        x:'center'
		    },
		    tooltip : {
		        trigger: 'item',
		        formatter: "{a} <br/>{b} : {c} ({d}%)"
		    },
		    legend: {
		        orient: 'vertical',
		        left: 'left',
		        data: ['差','中','良','优']
		    },
		    series : [
		        {
		            name: '等级统计',
		            type: 'pie',
		            radius : '55%',
		            center: ['50%', '60%'],
		            data:[
		                {value:cha, name:'差'},
		                {value:zhong, name:'中'},
		                {value:liang, name:'良'},
		                {value:you, name:'优'}
		            ],
		            itemStyle: {
		                emphasis: {
		                    shadowBlur: 10,
		                    shadowOffsetX: 0,
		                    shadowColor: 'rgba(0, 0, 0, 0.5)'
		                }
		            }
		        }
		    ]
		};
option3 = {
    backgroundColor: "#344b58",
    "title": {
        "text": "年度行为统计",
        x: "4%",

        textStyle: {
            color: '#fff',
            fontSize: '22'
        },
        subtextStyle: {
            color: '#90979c',
            fontSize: '16',

        },
    },
    "tooltip": {
        "trigger": "axis",
        "axisPointer": {
            "type": "shadow",
            textStyle: {
                color: "#fff"
            }

        },
    },
    "grid": {
        "borderWidth": 0,
        "top": 110,
        "bottom": 95,
        textStyle: {
            color: "#fff"
        }
    },
    "legend": {
        x: '4%',
        top: '11%',
        textStyle: {
            color: '#90979c',
        },
        "data": ['进步', '原则']
    },
     

    "calculable": true,
    "xAxis": [{
        "type": "category",
        "axisLine": {
            lineStyle: {
                color: '#90979c'
            }
        },
        "splitLine": {
            "show": false
        },
        "axisTick": {
            "show": false
        },
        "splitArea": {
            "show": false
        },
        "axisLabel": {
            "interval": 0,
            "rotate":45
        },
        "data": xData,
    }],
    "yAxis": [{
        "type": "value",
        "splitLine": {
            "show": false
        },
        "axisLine": {
            lineStyle: {
                color: '#90979c'
            }
        },
        "axisTick": {
            "show": false
        },
        "axisLabel": {
            "interval": 0,

        },
        "splitArea": {
            "show": false
        },

    }],
    "dataZoom": [{
        "show": true,
        "height": 30,
        "xAxisIndex": [
            0
        ],
        bottom: 30,
        "start": 90,
        "end": 100,
        handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
        handleSize: '110%',
        handleStyle:{
            color:"#d3dee5",
            
        },
           textStyle:{
            color:"#fff"},
           borderColor:"#90979c"
        
        
    }, {
        "type": "inside",
        "show": true,
        "height": 15,
        "start": 1,
        "end": 35
    }],
    "series": [{
            "name": "进步",
            "type": "bar",
            "stack": "评分",
            "barMaxWidth": 35,
            "barGap": "10%",
            "itemStyle": {
                "normal": {
                    "color": "rgba(255,144,128,1)",
                    "label": {
                        "show": true,
                        "textStyle": {
                            "color": "#fff"
                        },
                        "position": "insideTop",
                        formatter: function(p) {
                            return p.value > 0 ? (p.value) : '';
                        }
                    }
                }
            },
            "data": jb
        },

        {
            "name": "原则",
            "type": "bar",
            "stack": "评分",
            "itemStyle": {
                "normal": {
                    "color": "rgba(0,191,183,1)",
                    "barBorderRadius": 0,
                    "label": {
                        "show": true,
                        "position": "top",
                        formatter: function(p) {
                            return p.value > 0 ? (p.value) : '';
                        }
                    }
                }
            },
            "data": yz
        }, {
            "name": "总分",
            "type": "line",
            "stack": "评分",
            symbolSize:10,
            symbol:'circle',
            "itemStyle": {
                "normal": {
                    "color": "rgba(252,230,48,1)",
                    "barBorderRadius": 0,
                    "label": {
                        "show": true,
                        "position": "top",
                        formatter: function(p) {
                            return p.value > 0 ? (p.value) : '';
                        }
                    }
                }
            },
            "data": zf,
            "markLine": {
                data: [
                    {
                        type: 'average', 
                        name: '平均值',
                        lineStyle:{
                            normal:{
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: '#fb767b' // 0% 处的颜色
                                    }, {
                                        offset: 1, color: '#fb767b' // 100% 处的颜色
                                    }],
                                    globalCoord: false // 缺省为 false
                                }
                            }
                        }
                    },
                    {
                        name: '平均值为优',
                        yAxis: 170,
                        lineStyle:{
                            normal:{
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: '#8cef7a' // 0% 处的颜色
                                    }, {
                                        offset: 1, color: '#8cef7a' // 100% 处的颜色
                                    }],
                                    globalCoord: false // 缺省为 false
                                }
                            }
                        }
                    },
                    {
                        name: '平均值为良',
                        yAxis: 140,
                        lineStyle:{
                            normal:{
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: '#81e3ee' // 0% 处的颜色
                                    }, {
                                        offset: 1, color: '#81e3ee' // 100% 处的颜色
                                    }],
                                    globalCoord: false // 缺省为 false
                                }
                            }
                        }
                    },
                    {
                        name: '平均值为中',
                        yAxis: 100,
                        lineStyle:{
                            normal:{
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: '#e6cc6d' // 0% 处的颜色
                                    }, {
                                        offset: 1, color: '#e6cc6d' // 100% 处的颜色
                                    }],
                                    globalCoord: false // 缺省为 false
                                }
                            }
                        }
                    }
                ]
            }
        },
    ]
}
 myChart3.setOption(option3);
 myChart4.setOption(option4);


    });



	</script>
</body>
</html>